<template>
    <div class="attrs">
        <div class="attr-box" v-for="(item, i) in list" :key="i">
            <span>{{item.attr_name}}</span>
            <ul>
                <li @click="chose(i, item, it)" :class="sizes.includes(it) || colors.includes(it) ? 'active' : ''" v-for="(it, ind) in item.values" :key="ind">
                    {{it}}
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
export default {
    props: {
        list: Array,
        attrs_name: Array,
        tableData: Array
    },

    setup(props, {emit}) {
        // 声明数据来收集选中的属性
        const state = reactive({
            attrs_name: [], // 用来存储属性类型 
            sizes: [], // 用来存储选中的内存数据
            colors: [] // 用来存储选中的颜色
        })

        function chose(ind, parentAttr, it) {
            state.attrs_name[ind] = parentAttr.attr_name
            // console.log(state.attrs_name);
            // indexOf 检测数组或者字符串中是否包含某一项 如果包含则返回索引值 否则返回-1
            let sizeInd = state.sizes.indexOf(it) 
            let colorInd = state.colors.indexOf(it)
            if(sizeInd > -1) { // 满足条件表示该项在数组中已存在
                state.sizes.splice(sizeInd, 1)
            } else if(ind === 0) (  // 满足条件表示选择的是内存
                state.sizes.push(it)
            )

            if(colorInd > -1) { // 满足条件表示颜色中该项在数组中已存在
                state.colors.splice(colorInd, 1)
            } else if(ind === 1) {
                state.colors.push(it)
            }

            let arr = [] // 用来组合选中的属性数据
            state.sizes.forEach(item => { 
                if(state.colors.length > 0) { // 判断颜色属性是否为空
                    state.colors.forEach(el => { // 不为空时
                        arr.push([item, el])
                    })
                } else { // 颜色属性未空时
                    arr.push([item])
                    state.attrs_name.length = 1
                }
            })
            // console.log(arr);
            emit('update:attrs_name', state.attrs_name)
            emit('update:tableData', arr)
        }

        return {
            chose,
            ...toRefs(state)
        }
    }
 }
</script>

<style scoped lang="scss">

.attr-box {
    display: flex;
    border-bottom: 3px solid #333;
    height: 60px;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        li {
            padding: 4px 8px;
            border: 2px solid salmon;
            margin-left: 40px;
            border-radius: 8px;
            font-weight: normal;
        }
        .active {
            background-color: red;
        }
    }
    
}

</style>